<template>
  <div class="search">
    <mt-header fixed title="小说">
      <mt-button   slot="left" icon="back" @click="$router.back()"></mt-button>
      <mt-button slot="right" @click="search=!search">
        <img src="../assets/search.png" height="20" width="20" slot="icon">
      </mt-button>
    </mt-header>
    <mt-search
      v-if="search"
      v-model="q"
      cancel-text="取消"
      placeholder="搜索">
      <mt-cell
        v-for="item in result.results"
        :to="item.url.replace(url,'')"
        :title="item.title"
        :key="item.title"
        is-link
        :value="item.author">
      </mt-cell>
    </mt-search>
    <div v-else>
      <p class="title">分类</p>
      <div class="catalogs" >
        <div class="catalog" v-for="item in catalogs">
          <router-link :to="item.url">
            <mt-button >{{item.name}}</mt-button>
          </router-link>
        </div>
      </div>

      <p class="title">推荐</p>
      <mt-cell
        v-for="item in list"
        :to="item.url"
        :title="item.title"
        is-link
        :key="item.title"
        :value="item.author">
      </mt-cell>
    </div>

    <div id="html" style="display: none"></div>
  </div>
</template>
<script>
  import fetch from '../utils/fetch'
  import { Indicator } from 'mint-ui';
  import MtButton from "../../node_modules/mint-ui/packages/button/src/button.vue";
  import { mapGetters } from 'vuex';

  export default {
    components: {MtButton},
    data(){
      return {q:'',search:false,result:{},list:[],catalogs:[]}
    },
    watch:{
      q(val){
        if(val!==''){
          Indicator.open('Loading...')
          this.query().then(res=>{
            this.result = res.data;
            Indicator.close();
          })
        }
      }
    },
    methods:{
      query(){
        return fetch.get(`${this.url}novels?q=${this.q}`)
      },
      index(){
        fetch.get(`${this.url}novels/parse?url=http://m.qxs.la&encoding=gbk`).then(res=>{
          document.querySelector('#html').innerHTML= res.data.html;
          const elements = document.querySelectorAll('#html .list li');
          const tags = document.querySelectorAll('#html .ml a');
          tags.forEach(e=>{
            if(e.href.indexOf('last1.htm')<0){
              let url = e.href.replace('http://m.qxs.la/','novels/tag/');
              this.catalogs.push({url:url.replace('https://m.qxs.la/','novels/tag/'),name:e.innerHTML})
            }
          })
          elements.forEach(e=>{
            let arr =  e.innerText.trim().split('/');
            this.list.push({title:arr[0],author:arr[1],url:`novels${e.childNodes[0].attributes['href'].value}`})
          })
        })
      }
    },
    created(){
      let index = location.host.indexOf('gakki')>=0?1:0;
      this.$store.dispatch('switchUrl',index)
      this.index()
    },
    computed: {
      ...mapGetters([
        'url'
      ])
    }
  }
</script>
<style scoped>
  .search{
    text-align: left;
    padding-top: 40px;
  }
  .catalogs{
    display: flex;
    flex-wrap: wrap;
    background: #fff;
  }
  .catalog{
    min-width: 25vw;
    padding: 10px 0;
    text-align: center;
  }
  .title{
    font-size: 1.5em;
    font-weight: bold;
    margin: 0;
    line-height: 2;
    text-indent: 0.5em;
  }
</style>
